<template>
  <div v-if="showPanel" class="config-overlay" @click.self="closePanel">
    <div class="config-panel" @click.stop>
      <div class="config-header">
        <h3>抓拍算法灵敏度配置</h3>
        <button class="close-btn" @click="closePanel">×</button>
      </div>
      <div class="config-content">
        <div 
          v-for="algorithm in algorithms" 
          :key="algorithm.id"
          class="algorithm-item"
        >
          <div class="algorithm-info">
            <span class="algorithm-name">{{ algorithm.name }}</span>
            <span class="algorithm-status" :class="{ active: algorithm.enabled }">
              {{ algorithm.enabled ? '已启用' : '已禁用' }}
            </span>
          </div>
          <div class="sensitivity-control">
            <div class="sensitivity-label">
              <span>灵敏度：</span>
              <span class="sensitivity-value">{{ sensitivityLabels[currentSensitivity[algorithm.id] - 1] }}</span>
            </div>
            <div class="sensitivity-slider">
              <input
                type="range"
                :min="1"
                :max="6"
                :value="currentSensitivity[algorithm.id]"
                @input="updateSensitivity(algorithm.id, $event.target.value)"
                class="slider"
                :disabled="!algorithm.enabled"
              />
              <div class="sensitivity-marks">
                <span 
                  v-for="n in 6" 
                  :key="n"
                  :class="{ active: currentSensitivity[algorithm.id] >= n }"
                >{{ n }}</span>
              </div>
            </div>
          </div>
          <div class="algorithm-toggle">
            <label class="toggle-switch">
              <input 
                type="checkbox" 
                v-model="algorithm.enabled"
                @change="saveConfig"
              />
              <span class="slider-toggle"></span>
            </label>
          </div>
        </div>
      </div>
      <div class="config-footer">
        <button class="btn-reset" @click="resetToDefault">恢复默认</button>
        <button class="btn-save" @click="saveConfig">保存配置</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'

const props = defineProps({
  showPanel: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:showPanel', 'config-change'])

const sensitivityLabels = ['极低', '低', '中低', '中等', '中高', '高']

const algorithms = reactive([
  { id: 'handrail', name: '扶手抓拍', enabled: true },
  { id: 'helmet', name: '安全帽检测', enabled: true },
  { id: 'smoking', name: '吸烟检测', enabled: true },
  { id: 'phone', name: '手机使用检测', enabled: true },
  { id: 'leave_post', name: '离岗检测', enabled: true },
  { id: 'intrusion', name: '区域入侵检测', enabled: true },
  { id: 'fire', name: '火灾检测', enabled: true },
  { id: 'radiation', name: '放射源检测', enabled: true }
])

const currentSensitivity = reactive({
  handrail: 4,
  helmet: 5,
  smoking: 4,
  phone: 3,
  leave_post: 5,
  intrusion: 4,
  fire: 6,
  radiation: 6
})

// 从本地存储加载配置
const loadConfig = () => {
  const saved = localStorage.getItem('algorithmConfig')
  if (saved) {
    try {
      const config = JSON.parse(saved)
      Object.assign(currentSensitivity, config.sensitivity || {})
      algorithms.forEach(alg => {
        const savedAlg = config.algorithms?.find(a => a.id === alg.id)
        if (savedAlg) {
          alg.enabled = savedAlg.enabled
        }
      })
    } catch (e) {
      console.error('Failed to load config:', e)
    }
  }
}

// 保存配置到本地存储
const saveConfig = () => {
  const config = {
    sensitivity: { ...currentSensitivity },
    algorithms: algorithms.map(alg => ({ id: alg.id, enabled: alg.enabled }))
  }
  localStorage.setItem('algorithmConfig', JSON.stringify(config))
  emit('config-change', config)
}

const updateSensitivity = (algorithmId, value) => {
  currentSensitivity[algorithmId] = parseInt(value)
  saveConfig()
}

const resetToDefault = () => {
  algorithms.forEach(alg => {
    alg.enabled = true
  })
  Object.keys(currentSensitivity).forEach(key => {
    currentSensitivity[key] = 4 // 默认中等
  })
  // 特殊算法默认高灵敏度
  currentSensitivity.fire = 6
  currentSensitivity.radiation = 6
  saveConfig()
}

const closePanel = () => {
  emit('update:showPanel', false)
}

// 初始化时加载配置
loadConfig()

// 监听配置变化
watch(() => props.showPanel, (newVal) => {
  if (newVal) {
    loadConfig()
  }
})
</script>

<style scoped>
.config-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.config-panel {
  width: 900px;
  max-width: 95vw;
  max-height: 90vh;
  background: linear-gradient(135deg, rgba(15, 25, 40, 0.98), rgba(10, 18, 32, 0.98));
  border: 1px solid rgba(100, 150, 255, 0.3);
  border-radius: 20px;
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(100, 150, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.config-header {
  padding: 20px 24px;
  border-bottom: 1px solid rgba(100, 150, 255, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(10, 20, 35, 0.5);
}

.config-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #ecf8ff;
  text-shadow: 0 0 10px rgba(90, 231, 255, 0.4);
}

.close-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 100, 100, 0.2);
  color: #ffcccc;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.close-btn:hover {
  background: rgba(255, 80, 80, 0.4);
  color: #ffffff;
  transform: rotate(90deg);
}

.config-content {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.algorithm-item {
  background: rgba(15, 30, 50, 0.6);
  border: 1px solid rgba(100, 150, 255, 0.2);
  border-radius: 12px;
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr 2fr auto;
  gap: 16px;
  align-items: center;
  transition: all 0.3s ease;
}

.algorithm-item:hover {
  border-color: rgba(100, 150, 255, 0.4);
  background: rgba(15, 30, 50, 0.8);
}

.algorithm-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.algorithm-name {
  font-size: 16px;
  font-weight: 600;
  color: #d4efff;
}

.algorithm-status {
  font-size: 12px;
  color: rgba(200, 200, 200, 0.6);
}

.algorithm-status.active {
  color: #31ffa1;
}

.sensitivity-control {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sensitivity-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: rgba(200, 220, 255, 0.9);
}

.sensitivity-value {
  color: #52e0ff;
  font-weight: 600;
  font-size: 14px;
}

.sensitivity-slider {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.slider {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: rgba(50, 80, 120, 0.5);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #52e0ff, #0088ff);
  cursor: pointer;
  box-shadow: 0 0 10px rgba(82, 224, 255, 0.6);
  transition: all 0.2s ease;
}

.slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 0 15px rgba(82, 224, 255, 0.9);
}

.slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #52e0ff, #0088ff);
  cursor: pointer;
  border: none;
  box-shadow: 0 0 10px rgba(82, 224, 255, 0.6);
  transition: all 0.2s ease;
}

.slider:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sensitivity-marks {
  display: flex;
  justify-content: space-between;
  padding: 0 9px;
}

.sensitivity-marks span {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: rgba(150, 180, 220, 0.5);
  background: rgba(50, 80, 120, 0.3);
  transition: all 0.3s ease;
}

.sensitivity-marks span.active {
  color: #52e0ff;
  background: rgba(82, 224, 255, 0.2);
  box-shadow: 0 0 8px rgba(82, 224, 255, 0.4);
}

.algorithm-toggle {
  display: flex;
  align-items: center;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 26px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider-toggle {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(100, 100, 100, 0.4);
  transition: 0.3s;
  border-radius: 26px;
}

.slider-toggle:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}

input:checked + .slider-toggle {
  background-color: rgba(82, 224, 255, 0.4);
}

input:checked + .slider-toggle:before {
  transform: translateX(24px);
  background-color: #52e0ff;
  box-shadow: 0 0 10px rgba(82, 224, 255, 0.6);
}

.config-footer {
  padding: 20px 24px;
  border-top: 1px solid rgba(100, 150, 255, 0.2);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  background: rgba(10, 20, 35, 0.5);
}

.btn-reset,
.btn-save {
  padding: 10px 24px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-reset {
  background: rgba(150, 150, 150, 0.3);
  color: rgba(220, 220, 220, 0.9);
  border: 1px solid rgba(150, 150, 150, 0.4);
}

.btn-reset:hover {
  background: rgba(150, 150, 150, 0.5);
  border-color: rgba(150, 150, 150, 0.6);
}

.btn-save {
  background: linear-gradient(135deg, rgba(82, 224, 255, 0.3), rgba(0, 136, 255, 0.3));
  color: #52e0ff;
  border: 1px solid rgba(82, 224, 255, 0.5);
  box-shadow: 0 0 15px rgba(82, 224, 255, 0.2);
}

.btn-save:hover {
  background: linear-gradient(135deg, rgba(82, 224, 255, 0.5), rgba(0, 136, 255, 0.5));
  box-shadow: 0 0 20px rgba(82, 224, 255, 0.4);
  transform: translateY(-1px);
}
</style>
